.toggle {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 19px;
  width: 42px;

  &:active {
    .knob:after {
      transform: scale(2);
    }
  }

  .bar {
    position: relative;
    width: 100%;
    height: 7px;
    background-color: $white-5;
    border-radius: 4px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 7px;
      border-radius: 4px;
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
      background-color: lighten($blue, 30%);
      width: 0;
      transition: width 150ms;
    }
  }

  .knob {
    top: 0;
    left: 0;
    position: absolute;
    height: 19px;
    width: 19px;
    background-color: darken(white, 4%);
    border-radius: 50%;
    transition: transform 150ms, background-color 150ms;
    z-index: 1;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);

    &:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      transition: transform 100ms;
      transform: scale(0);
      width: 19px;
      height: 19px;
      background-color: rgba(0, 0, 0, 0.05);
    }
  }

  &.checked {
    .knob {
      transform: translate(42px - 19px);
      background-color: $blue;
    }

    .bar:after {
      width: 100%;
    }

    .knob:after {
      background-color: transparentize($blue, 0.8);
    }
  }
}
